<template>
    <el-row id="cpts-power-analyze">
      <el-row v-if="!isViewShow" class="permission">
        没有权限!
      </el-row>
      <el-card v-else class="box-card">
        <div slot="header" class="clearfix">
          <span>数据分析</span>
        </div>

        <!--条件栏-->
        <el-row>
          <span>变量:</span>
          <el-select v-model="powerTypeValue" placeholder="请选择">
            <el-option
              v-for="item in powerTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <span>时间类型:</span>
          <el-select @change="onTimeTypeChange" v-model="timeTypeValue" placeholder="请选择">
            <el-option
              v-for="item in timeTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <span>选择时间:</span>
          <el-date-picker
            v-model="selectDate"
            :type="currentType"
            :value-format="dateFormat"
            placeholder="选择日期">
          </el-date-picker>

          <el-button :disabled="!isViewEdit" @click="submitCondition">确定</el-button>

        </el-row>

        <!--图表栏-->
        <el-row class="chart-layout">
          <BaseEchartsComponent ref="cptsPowerAnalyzeLineChart" :id="'cpts_poweranalyzelinechart'" :data="lineChartsOptions" :time="chartTime" />
        </el-row>

      </el-card>
    </el-row>
</template>

<script>
  import BaseEchartsComponent from "../BaseEcharts/index";
  import myEchartsOptions from '../../chart-options/echartsOptions'
  import {DateTime} from '../../utils/dateTime'
    export default {
      name: "powerAnalyze",
      components: {BaseEchartsComponent},
      data(){
          return {
            isViewShow: true,
            isViewEdit: true,
            powerTypeValue: "",                 // 采集数据绑定值
            timeTypeValue: 2,
            powerTypeOptions:[],
            timeTypeOptions:[{label:'年',value:4},{label:'月',value:3},{label:'日',value:2}],
            selectDate: new DateTime().getDate2(),
            currentType: 'date',
            dateFormat: 'yyyy-MM-dd',
            lineChartsOptions: this.validateGlobal.cloneObject(myEchartsOptions.lineChartsOption),
            chartTime: ''
          }
      },
      mounted(){
        let _that = this
        let obj = this.validateGlobal.getPermission(9)
        this.isViewShow = obj.isViewShow
        this.isViewEdit = obj.isViewEdit
        this.lineChartsOptions.xAxis[0].data = ["1"]
        this.lineChartsOptions.series[0].data = [0]
        this.lineChartsOptions.xAxis[0].axisLine.lineStyle.color = '#000'
        this.lineChartsOptions.yAxis[0].axisLine.lineStyle.color = '#000'
        this.lineChartsOptions.grid.left = 60
        this.lineChartsOptions.grid.right = 60
        this.lineChartsOptions.title.text = '单位'
        this.askNoteTags()

      },
      methods:{
        onTimeTypeChange: function(value){
          let dateTime = new DateTime()
          if(value == 4){
            this.selectDate = dateTime.getYear()
            this.currentType = 'year'
            this.dateFormat = 'yyyy'
          }else if (value == 3){
            this.selectDate = dateTime.getMonth()
            this.currentType = 'month'
            this.dateFormat = 'yyyy-MM'
          }else{
            this.selectDate = dateTime.getDate2()
            this.currentType = 'date'
            this.dateFormat = 'yyyy-MM-dd'
          }
        },
        submitCondition: function(){
          this.askLists()
        },

        askNoteTags: async function(){
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let gateway = sessionStorage.getItem("gateway")
          let url = _that.ports.collectManage.collectData.lists
          let askData = {
            userId: userId,
            current: 1,
            size: 1000,
            nodeName:'',
            isReportShow:'',
            isCumulative:'',
            sn: gateway
          }
          let promise =  this.http.getAwait(url,askData)
          await promise.then(res=>{
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              if (res.data.records) {
                let arry = []
                for (let i = 0; i < res.data.records.length; ++i) {
                  arry.push({label:res.data.records[i].nodeName,value:res.data.records[i].id})
                }
                _that.powerTypeOptions = arry
                _that.powerTypeValue = arry[0].value
              }
            }else{
              _that.$message('数据获取失败!');
            }
          })
          this.askLists()
        },
        askLists: function() {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.powerManage.analyzeList
          let askData = {
            userId: userId,
            dataCollectedNodeId: _that.powerTypeValue,
            time: _that.selectDate,
            type: _that.timeTypeValue,
          }
          this.http.get(url,askData,res=>{
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.chartTime = new Date()
              _that.lineChartsOptions.xAxis[0].data = res.data.times
              _that.lineChartsOptions.series[0].data = res.data.values
              _that.$nextTick(()=>{
                _that.$refs.cptsPowerAnalyzeLineChart.drawLineGraph('cpts_poweranalyzelinechart',_that.lineChartsOptions)
              })
            }
          })
        },

      }
    }
</script>

<style lang="scss">
#cpts-power-analyze{

  .el-card{
    margin: 20px 20px 0 20px;
    height: 770px;
  }
   .el-card__body{
    overflow:auto;
  }

  .evc-dialog-itemize{
    > :first-child.el-row{
      margin-top: 10px;
      margin-bottom: 20px;
    }
  }

  .evc-submit-layout{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .chart-layout{
    margin-top: 20px;
  }

  #cpts_poweranalyzelinechart{
    height: 580px;
  }
}
</style>
